import { observer } from 'mobx-react';
import HyperSpeed from '@c/HyperSpeed/hyperspeed.jsx';
import React from 'react';

import BlurText from '@c/BlurText';
import SplitText from '@c/SplitText';
import GradientText from '@c/GradientText';
import AnimatedContent from '@c/AnimatedContent';

import useStores from '@s';

const darkColors = ['#AF7A98', '#4899FE', '#AF7A98', '#4899FE', '#AF7A98'];
const lightColors = ['#d856bf', '#0e5ea5', '#d856bf', '#0e5ea5', '#d856bf'];

function Index() {
  const { globalStore, search } = useStores();
  const { them } = globalStore;

  return (
    <div className="w-screen h-screen relative">
      <div className=" absolute left-0 right-0 z-[8] bottom-0 top-[95%] bg-gradient-to-t from-new-bg-sec to-transparent dark:from-new-bg-sec-dark"></div>
      <div className="absolute w-screen h-screen z-[1]">
        <HyperSpeed
          effectOptions={{
            onSpeedUp: () => {},
            onSlowDown: () => {},
            distortion: 'turbulentDistortion',
            length: 400,
            roadWidth: 10,
            islandWidth: 2,
            lanesPerRoad: 3,
            fov: 90,
            fovSpeedUp: 150,
            speedUp: 2,
            carLightsFade: 0.4,
            totalSideLightSticks: 20,
            lightPairsPerRoadWay: 40,
            shoulderLinesWidthPercentage: 0.05,
            brokenLinesWidthPercentage: 0.1,
            brokenLinesLengthPercentage: 0.5,
            lightStickWidth: [0.12, 0.5],
            lightStickHeight: [1.3, 1.7],
            movingAwaySpeed: [60, 80],
            movingCloserSpeed: [-120, -160],
            carLightsLength: [400 * 0.03, 400 * 0.2],
            carLightsRadius: [0.05, 0.14],
            carWidthPercentage: [0.3, 0.5],
            carShiftX: [-0.8, 0.8],
            carFloorSeparation: [0, 5],
            colors: {
              roadColor: them === 'dark' ? 0x16161a : 0xfffffe,
              islandColor: them === 'dark' ? 0x16161a : 0xfffffe,
              background: them === 'dark' ? 0x16161a : 0xfffffe,
              shoulderLines: 0x131318,
              brokenLines: 0x131318,
              leftCars: [0xd856bf, 0x6750a2, 0xc247ac],
              rightCars: [0x03b3c3, 0x0e5ea5, 0x324555],
              sticks: 0x03b3c3,
            },
          }}
        />
      </div>
      <div className=" text-new-text dark:text-new-text-dark flex items-center flex-col justify-center relative z-10">
        <BlurText
          text="Haogege home page"
          delay={150}
          animateBy="words"
          direction="top"
          onAnimationComplete={() => {}}
          className="text-6xl my-8 font-bold pt-8"
        />
        <div className=" text-new-desc dark:text-new-desc-dark mb-8">
          <SplitText
            text="haogege is a web developer"
            className="text-2xl font-semibold text-center"
            delay={150}
            animationFrom={{ opacity: 0, transform: 'translate3d(0,50px,0)' }}
            animationTo={{ opacity: 1, transform: 'translate3d(0,0,0)' }}
            easing="easeOutCubic"
            threshold={0.2}
            rootMargin="-50px"
            onLetterAnimationComplete={() => {}}
          />
        </div>
        <div>
          <AnimatedContent
            distance={180}
            direction="vertical"
            reverse={false}
            config={{ tension: 80, friction: 20 }}
            initialOpacity={0.05}
            animateOpacity
            scale={1.1}
            threshold={0.2}
          >
            <GradientText
              colors={them === 'dark' ? darkColors : lightColors}
              animationSpeed={6}
              showBorder
              className="py-4 px-8 !bg-transparent text-xl !rounded-full"
              isDark={them === 'dark'}
            >
              notes
            </GradientText>
          </AnimatedContent>
        </div>
      </div>
    </div>
  );
}

export default observer(Index);
